import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import Slide, { SlideRef } from "@shared/slide";
import { useRef } from "react";
import UpdateNickname from "@pages/personal/widgets/updateNickname";




interface Props {
    // 用户昵称
    name: string;
}

export default function Nickname({ name }: Props) {
    const slideRef = useRef<SlideRef | null>(null);

    return (
        <li>
            <span>昵称</span>
            <div className={styles.value} onClick={() => slideRef.current?.open()}>
                <span>{name}</span>
                <Slide ref={slideRef} direction={"toLeft"}>
                    <UpdateNickname slideRef={slideRef} name={name} />
                </Slide>

                <GeekIcon type="iconbtn_right" className={styles.icon} />
            </div>
        </li>
    );
}
